/* 引入类组件 */
import React, { Component, Suspense } from 'react'
/* 引入layout自定义组件 */
import MyLayout from '@components/MyLayout'
/* 引入路由跳转相关组件 */
import { Switch, Route, Redirect } from 'react-router-dom'
/* 引入路由组件 */
import routes from '@/routes'
import { Spin } from 'antd'
/* 导出类组件 */
export default class Admin extends Component {
  /* 调用render函数渲染页面 */
  render() {
    return (
      <Suspense fallback={
        /* 加载的组件 */
        <div style={{textAlign:'center',marginTop:500}}>
        <Spin size="large" />
        </div>
      }>
        <MyLayout>
          {/* switch只匹配一个路由 */}
          <Switch>
            {
              /* 遍历路由 */
              routes.map(route => {
                return (
                  /* 定义动态路由组件渲染路由 */
                  <Route
                    /* path 路由里面定义的path */
                    key={route.path}
                    path={route.path}
                    /* 渲染出路由 */
                    render={
                      (routeProps) => {
                        /* 取出缓存当中的role权限 */
                        const role = localStorage.getItem('role');
                        /* 如果缓存中的权限在路由当中 */
                        if (route.roles.includes(role)) {
                          /* 就渲染出路由 */
                          return <route.component {...routeProps} />
                        } else {
                          /* 否则跳转到没有权限的页面 */
                          return <Redirect to="/admin/noPermission" />
                        }
                      }
                    }
                  />
                )
              })
            }
            {/* 路由重定向 */}
            <Redirect to="/admin/dashBoard" from="/admin" exact />
            {/* exact精准匹配 */}
          </Switch>
        </MyLayout>
      </Suspense>
    )
  }
}
